<template>
  <div>
    <div class="bgcUrl">
      <el-tabs type="card">
        <el-tab-pane label="地产列表"></el-tab-pane>
      </el-tabs>
      <el-card v-for="item in propertyList" :key="item.id">
        <el-row>
          <el-col :span="16">
            <img :src="item.image" alt="" />
            <!-- <img src="@/assets/common/309110.jpg" alt="" /> -->
          </el-col>
          <el-col :span="6">
            <h1>{{ item.title }}</h1>
            <p>售楼地址:{{ item.address }}</p>
            <el-divider></el-divider>
            <p>描述：{{ item.desc }}</p>
            <el-divider></el-divider>
            <p>开盘时间：{{ item.created_at }}</p>
            <el-divider></el-divider>
            <el-button type="warning" @click="toDetail">查看详情</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getHouseList } from '@/api/houseManager'// 获取房产列表
import { getProperties } from "@/api/agents";
export default {
  data(){
    return{
      propertyList: [],
      category: '', // 筛选相关分类, 传入分类 id
      agent: '', // 筛选相关经纪, 传入经纪 id
      title_contains: this.$route.query.title_contains, // 模糊搜索标题
      limit: 3,
      start: 1,
    }
  },
 async created(){
    this.getHouseList()
    const res = await getProperties();
    console.log(res);
    this.propertyList = res.data;
  },
  methods:{
    async getHouseList() { // 房产列表
      const res = await getHouseList({
        title_contains: this.title_contains
      })
      console.log(res)
      this.houseList = res.data
    },
    toDetail() {
      this.$router.push("/detail");
  }
}
};
</script>

<style lang="scss" scoped>
.bgcUrl {
  // height: calc(100vh - 60px);
  background: url(~@/assets/common/310784.jpg) no-repeat;
  background-attachment: fixed;
  // opacity: 0.8;
  background-size: 100% 100%;
}
.el-tabs {
  margin: 0 20%;
}
.el-card {
  width: 60%;
  height: 500px;
  margin: 15px auto;
  opacity: 0.8;
  // text-align: center;
}
img {
  width: 90%;
  height: 400px;
}
.el-button {
  margin-left: 25%;
}
h1 {
  margin-bottom: 20px;
}
p {
  font-size: 12px;
}
</style>v